<template>
  <div id="epidemicData" style="text-align: center">
    <div id="header">
      <h1 class="slogan">科学防护&nbsp;&nbsp;共渡难关</h1>
      <h2 class="title1">新型冠状病毒肺炎</h2>
      <h1 class="title2">疫情实时追踪</h1>
      <h3>数据来源：国家及各级卫健委每日信息发布</h3>
    </div>
    <div id="content">
      <a-menu
        v-model="current"
        mode="horizontal"
        :style="{
          borderRadius: '1.667vw 1.667vw 0 0',
          backgroundColor: '#ddecff',
          fontSize: '2vw',
          fontWeight: '400',
          color: '#445063',
        }"
      >
        <a-menu-item
          key="epidemicData"
          @click="toDataPart"
          :style="{
            width: '50%',
            height: '100%',
            padding: '0.8vw 0px',
            margin: '0px',
          }"
        >
          国内疫情
        </a-menu-item>

        <a-menu-item
          key="knowledge"
          :style="{
            width: '50%',
            height: '100%',
            padding: '0.8vw 0px',
            margin: '0px',
            borderLeft: '1px solid #fff',
            borderRadius: '2.667vw 0 0 0',
          }"
          @click="toKnowledge"
        >
          防疫须知
        </a-menu-item>
      </a-menu>
      <div v-if="dataPart === false">
        <div id="knowledge">
          <p class="knowledge-title">新冠肺炎预防须知</p>
          <div style="padding-bottom: 1px">
            <div class="knowledge-content">
              <div class="content-part">
                <div class="part-title">
                  <img
                    src="../../assets/part1Logo.png"
                    alt="logo.png"
                    class="titleLogo"
                  />
                  <span class="titleItem">个人清洁</span>
                </div>

                <div class="part-list">
                  <ul>
                    <li>经常保持双手清洁，尤其在触摸口、鼻或眼之前。</li>
                    <li>
                      经常用洗手液和清水清洗双手，搓手最少20秒，并用纸巾擦干。
                    </li>
                    <li>
                      打喷嚏或咳嗽时应用纸巾掩盖口鼻，把用过的纸巾弃置于有盖垃圾箱内，然后彻底清洁双手。
                    </li>
                  </ul>
                </div>
              </div>

              <div class="content-part">
                <div class="part-title">
                  <img
                    src="../../assets/part2Logo.png"
                    alt="logo.png"
                    class="titleLogo"
                  />
                  <span class="titleItem">尽量避免</span>
                </div>

                <div class="part-list">
                  <ul>
                    <li>
                      减少前往人流密集的场所。如不可避免，应戴上外科口罩。
                    </li>
                    <li>
                      避免到访医院。如有必要到访医院，应佩戴外科口罩及时刻注重个人和手部卫生。
                    </li>
                    <li>
                      避免接触动物（包括野味）、禽鸟或其粪便；避免到海鲜、活禽市场或农场。
                    </li>

                    <li>切勿进食野味及切勿光顾有提供野味的餐馆。</li>

                    <li>
                      注意食物安全和卫生，避免进食或饮用生或末熟透的动物产品，包括奶类、蛋类和肉类。
                    </li>
                  </ul>
                </div>
              </div>

              <div class="content-part">
                <div class="part-title">
                  <img
                    src="../../assets/part3Logo.png"
                    alt="logo.png"
                    class="titleLogo"
                  />
                  <span class="titleItem">尽快就诊</span>
                </div>

                <div class="part-list">
                  <ul>
                    <li>
                      如有身体不适，特别是有发烧或咳嗽，应戴上外科口罩并尽快就诊。
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else>
        <div id="card-block">
          <div class="statisticalTimes">
            统计截至&nbsp;{{ statisticalTimes }}
          </div>

          <div id="card">
            <div style="display: flex">
              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #e57631"
                    >+{{ this.chinaAdd.localConfirmH5 }}</span
                  >
                </div>
                <div class="number" style="color: #e57631">
                  {{ this.chinaTotal.localConfirm }}
                </div>
                <div class="card-title">本土现有确诊</div>
              </div>

              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #e61c1d">{{
                    this.chinaAdd.nowConfirm
                  }}</span>
                </div>
                <div class="number" style="color: #e61c1d">
                  {{ this.chinaTotal.nowConfirm }}
                </div>
                <div class="card-title">现有确诊</div>
              </div>

              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #be2121"
                    >+{{ this.chinaAdd.confirm }}</span
                  >
                </div>
                <div class="number" style="color: #be2121">
                  {{ this.chinaTotal.confirm }}
                </div>
                <div class="card-title">累计确诊</div>
              </div>
            </div>
            <div style="display: flex">
              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #ae3ac6"
                    >+{{ this.chinaAdd.noInfect }}</span
                  >
                </div>
                <div class="number" style="color: #ae3ac6">
                  {{ this.chinaTotal.noInfect }}
                </div>
                <div class="card-title">无症状感染者</div>
              </div>

              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #4e8be6"
                    >+{{ this.chinaAdd.importedCase }}</span
                  >
                </div>
                <div class="number" style="color: #4e8be6">
                  {{ this.chinaTotal.importedCase }}
                </div>
                <div class="card-title">境外输入</div>
              </div>

              <div class="card-item">
                <div class="compare">
                  较上日
                  <span style="color: #4e5a65">+{{ this.chinaAdd.dead }}</span>
                </div>
                <div class="number" style="color: #4e5a65">
                  {{ this.chinaTotal.dead }}
                </div>
                <div class="card-title">累计死亡</div>
              </div>
            </div>
          </div>
        </div>

        <div class="echartsPart" :style="{ marginTop: '0px' }">
          <div class="form-title" style="margin-bottom: 2vw">
            全国疫情新增趋势
          </div>
          <div
            id="todayChart"
            :style="{ minWidth: '120px', minHeight: '310px' }"
          ></div>
        </div>

        <div class="echartsPart">
          <!--        <div class="form-title" style="margin-bottom:2vw">全国疫情新增趋势</div>-->
          <div
            id="totalChart"
            :style="{ minWidth: '120px', minHeight: '310px' }"
          ></div>
        </div>

        <div class="echartsPart" :style="{ marginTop: '0px' }">
          <!--        <div class="form-title" style="margin-bottom:2vw">全国疫情新增趋势</div>-->
          <div
            id="totalHealAndDeadChart"
            :style="{ minWidth: '120px', minHeight: '310px' }"
          ></div>
        </div>

        <div id="dangerousPlaceForm">
          <div class="form-header">
            <div class="form-title">近期31省区市本土病例</div>
          </div>
          <a-table
            :columns="dangerousPlaceColumns"
            :data-source="dangerousPlace"
            :pagination="pagination"
            :rowKey="(record) => record.name"
            :style="{ padding: '10px 0px', margin: '0px', textAlign: 'center' }"
          >
            <template slot="today.confirm" slot-scope="text, record">
              <span v-if="record.today.confirm !== 0" style="color: #ff7f7f"
                >+{{ record.today.confirm }}</span
              >
              <span v-else>{{ record.today.confirm }}</span>
            </template>
          </a-table>
        </div>

        <div id="provinceEpidemicDataForm">
          <div class="form-header">
            <div class="form-title" style="margin-bottom: 2vw">
              中国疫情（包括港澳台）
            </div>
          </div>
          <a-table
            :columns="provinceEpidemicDataColumns"
            childrenColumnName="child"
            :data-source="provinceEpidemicData"
            :pagination="pagination1"
            :rowKey="(record) => record.name"
            :style="{ padding: '10px 0px', margin: '0px', textAlign: 'center' }"
          >
            <span slot="total.nowConfirm" :style="{ backgroundColor: 'red' }"
              ><a-icon type="smile-o"
            /></span>
          </a-table>
        </div>

        <!--      内部图表大小是与div容器大小相关的，如果想调整图表大小，调整div就可以了-->
        <!--      如果是想调整图表与div间上下左右留白，则设置grid属性就可以了-->
      </div>
    </div>
  </div>
</template>



<script>
import axios from "axios";
import * as echarts from "echarts";
import $ from 'jquery'
const dangerousPlaceColumns = [
  {
    title: "城市（区）",
    key: "name",
    dataIndex: "name",
  },

  {
    title: "新增",
    key: "today.confirm",
    dataIndex: "today.confirm",
    scopedSlots: { customRender: "today.confirm" },
  },

  {
    title: "现有确诊",
    key: "total.nowConfirm",
    dataIndex: "total.nowConfirm",
    // scopedSlots: {customRender: 'action'},
    // width: '40%',
  },

  {
    title: "区域风险",
    key: "total.grade",
    dataIndex: "total.grade",
  },
];

const provinceEpidemicDataColumns = [
  {
    title: "地区",
    key: "name",
    dataIndex: "name",
  },

  {
    title: "现有",
    key: "total.nowConfirm",
    dataIndex: "total.nowConfirm",
    slots: { title: "total.nowConfirm" },
    sorter: (a, b) => {
      return a.total.nowConfirm > b.total.nowConfirm ? 1 : -1;
    },
  },

  {
    title: "累计",
    key: "total.confirm",
    dataIndex: "total.confirm",
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.confirm > b.total.confirm ? 1 : -1;
    },
  },

  {
    title: "治愈",
    key: "total.heal",
    dataIndex: "total.heal",
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.heal > b.total.heal ? 1 : -1;
    },
  },

  {
    title: "死亡",
    key: "total.dead",
    dataIndex: "total.dead",
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.dead > b.total.dead ? 1 : -1;
    },
  },
];

export default {
  name: "index",
  data() {
    return {
      current: ["epidemicData"],

      dataPart: null,

      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
        showTotal: (total) => `共${total}条`, // 显示总数
        onChange: (page) => {
          console.log("page", page);
          this.pagination.current = page;
        },
      },

      pagination1: {
        pageSize: 10,
        total: 0,
        current: 1,
        showTotal: (total) => `共${total}条`, // 显示总数
        onChange: (page) => {
          console.log("page", page);
          this.pagination1.current = page;
        },
      },

      provinceEpidemicData: [],

      dangerousPlaceColumns,
      provinceEpidemicDataColumns,

      statisticalTimes: "",
      chinaTotal: {
        confirm: "",
        dead: "",
        heal: "",
        importedCase: "",
        localConfirm: "",
        localConfirmH5: "",
        local_acc_confirm: "",
        noInfect: "",
        noInfectH5: "",
        nowConfirm: "",
        nowSevere: "",
        showLocalConfirm: "",
        showlocalinfeciton: "",
        suspect: "",
      },
      chinaAdd: {
        confirm: "",
        dead: "",
        heal: "",
        importedCase: "",
        localConfirm: "",
        localConfirmH5: "",
        noInfect: "",
        noInfectH5: "",
        nowConfirm: "",
        nowSevere: "",
        suspect: "",
      },
      dangerousPlace: [],
      epidemicDataWithTime: {
        date: "",
        todayConfirm: "",
        todaySuspect: "",
        totalConfirm: "",
        totalStoreConfirm: "",
        totalHeal: "",
        totalDead: "",
      },
    };
  },

  mounted() {
    this.getStatistic();
    this.getDataWithTime();
  },
  methods: {
    onChange(a) {
      console.log(a);
    },

    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var todayChart = echarts.init(document.getElementById("todayChart"));
      var totalChart = echarts.init(document.getElementById("totalChart"));
      var totalHealAndDeadChart = echarts.init(
        document.getElementById("totalHealAndDeadChart")
      );
      // 绘制图表
      todayChart.setOption({
        grid: {
          x: 50,
          y: 60,
          x2: 40,
          y2: 70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger: "axis",
        },

        // tooltip: {},
        legend: {
          data: ["确诊", "疑似"],

          x: "right",
          y: "top",
          textStyle: {
            fontSize: 18,
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: "日期",

          axisLabel: {
            interval: 5,
            rotate: 45,
            // margin-top:12
          },
        },
        yAxis: {},

        series: [
          {
            name: "确诊", //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: "line",
            data: [],
            smooth: true,
          },
          {
            name: "疑似", //系列名称
            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "rgb(255,214,103)",
              },
            },
          },
        ],
      });

      totalChart.setOption({
        grid: {
          x: 50,
          y: 60,
          x2: 40,
          y2: 70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger: "axis",
        },

        // tooltip: {},
        legend: {
          data: ["累计确诊", "现有确诊"],
          x: "right",
          y: "top",
          textStyle: {
            fontSize: 18,
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: "日期",

          axisLabel: {
            interval: 5,
            rotate: 45,
            // margin-top:12
          },
        },
        yAxis: {},

        series: [
          {
            name: "累计确诊", //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "rgb(163,29,19)",
              },
            },
          },
          {
            name: "现有确诊", //系列名称
            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "rgb(228,74,61)",
              },
            },
          },
        ],
      });

      totalHealAndDeadChart.setOption({
        grid: {
          x: 50,
          y: 60,
          x2: 40,
          y2: 70,
          // borderWidth:10
        },
        // title为图表配置标题
        // title: {
        //   // text: '全国疫情新增趋势',
        //   x:'center',
        //   y:'top',
        //   textAlign:'left',
        // },

        // 配置提示信息
        tooltip: {
          trigger: "axis",
        },

        // tooltip: {},
        legend: {
          data: ["累计治愈", "累计死亡"],
          x: "right",
          y: "top",
          textStyle: {
            fontSize: 18,
          },
        },
        // legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        // xAxis配置要在 X 轴显示的项
        // xAxis: {
        //   // data: ["1", "2", "3", "4", "5", "6"]
        //   data:this.epidemicDataWithTime.date
        // },
        // 配置要在 Y 轴显示的项。
        xAxis: {
          data: [],
          name: "日期",

          axisLabel: {
            interval: 5,
            rotate: 45,
            // margin-top:12
          },
        },
        yAxis: {},

        series: [
          {
            name: "累计治愈", //系列名称
            // type: 'bar',    //系列图表类型
            // // data:this.epidemicDataWithTime
            // data: [5, 20, 36, 10, 10, 20]   //系列中的数据内容

            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "rgb(88,169,122)",
              },
            },
          },
          {
            name: "累计死亡", //系列名称
            type: "line",
            data: [],
            smooth: true,
            itemStyle: {
              normal: {
                color: "rgb(130,130,130)",
              },
            },
          },
        ],
      });

      //显示加载动画
      todayChart.showLoading();
      totalChart.showLoading();
      totalHealAndDeadChart.showLoading();

      setTimeout(() => {
        //为了让加载动画效果明显,这里加入了setTimeout,实现300ms延时
        todayChart.hideLoading(); //隐藏加载动画
        totalChart.hideLoading();
        totalHealAndDeadChart.hideLoading();

        todayChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date,
          },
          series: [
            {
              data: this.epidemicDataWithTime.todayConfirm,
            },
            {
              data: this.epidemicDataWithTime.todaySuspect,
            },
          ],
        });

        totalChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date,
          },
          series: [
            {
              data: this.epidemicDataWithTime.totalConfirm,
            },
            {
              data: this.epidemicDataWithTime.totalStoreConfirm,
            },
          ],
        });

        totalHealAndDeadChart.setOption({
          xAxis: {
            data: this.epidemicDataWithTime.date,
          },
          series: [
            {
              data: this.epidemicDataWithTime.totalHeal,
            },
            {
              data: this.epidemicDataWithTime.totalDead,
            },
          ],
        });

        window.onresize = function () {
          todayChart.resize();
          totalChart.resize();
          totalHealAndDeadChart.resize();
        };
      }, 300);
    },

    getDataWithTime() {
      console.log("去获取随时间变化的疫情数据111111111111");

      // this.$jsonp('https://c.m.163.com/ug/api/wuhan/app/data/list-total',
      //     ).then(({ data }) => {
      //       var dataset = data.data.chinaDayList;
      //       console.log("dataset:", dataset);
      // }).catch(err => {
      //   console.log("err:",err)
      // })

      $.ajax({
        url: "https://c.m.163.com/ug/api/wuhan/app/data/list-total",
        type: "get",
        data: {},
        dataType: "json"
      }).then(function(res) {
        //把从json获取的数据赋值给数组
        this.data = res.data;//
        console.log("data:",this.data)
      })











      // axios("/proxy1/ug/api/wuhan/app/data/list-total").then(
      //   ({ data }) => {
      //
      //     var dataset = data.data.chinaDayList;
      //     console.log("dataset:", dataset);
      //
      //     const date = [];
      //     const todayConfirm = [];
      //     const todaySuspect = [];
      //     const totalConfirm = [];
      //     const totalStoreConfirm = [];
      //     const totalDead = [];
      //     const totalHeal = [];
      //     for (let i = 0; i < dataset.length; i++) {
      //       date.push(dataset[i].date);
      //       todayConfirm.push(dataset[i].today.confirm);
      //       todaySuspect.push(dataset[i].today.suspect);
      //       totalConfirm.push(dataset[i].total.confirm);
      //       totalStoreConfirm.push(dataset[i].total.storeConfirm);
      //       totalDead.push(dataset[i].total.dead);
      //       totalHeal.push(dataset[i].total.heal);
      //     }
      //     console.log("date:", date);
      //     this.epidemicDataWithTime.date = date;
      //     console.log("新增确诊todayConfirm:", todayConfirm);
      //     this.epidemicDataWithTime.todayConfirm = todayConfirm;
      //     console.log("新增疑似todaysuspect:", todaySuspect);
      //     this.epidemicDataWithTime.todaySuspect = todaySuspect;
      //     console.log("累计的确诊totalConfirm:", totalConfirm);
      //     this.epidemicDataWithTime.totalConfirm = totalConfirm;
      //     console.log("现有确诊totalStoreConfirm:", totalStoreConfirm);
      //     this.epidemicDataWithTime.totalStoreConfirm = totalStoreConfirm;
      //     console.log("累计治愈totalHeal:", totalHeal);
      //     this.epidemicDataWithTime.totalHeal = totalHeal;
      //     console.log("累计死亡：", totalDead);
      //     this.epidemicDataWithTime.totalDead = totalDead;
      //
      //     this.drawLine();
      //   }
      // );
    },

    toKnowledge() {
      // console.log("跳转到防疫须知组件");
      this.dataPart = false;
      // console.log("this.dataPart:", this.dataPart);
    },

    toDataPart() {
      // console.log("跳转到数据部分组件");
      this.dataPart = null;
      // console.log("this.dataPart:", this.dataPart);
      this.getDataWithTime();
    },

    getStatistic() {
      // console.log("去获取疫情数据");
      axios("/proxy/g2/getOnsInfo?name=disease_h5").then(({ data }) => {
        var dataset = eval("(" + data.data + ")");
        // console.log("获取到的疫情数据：", dataset);
        this.statisticalTimes = dataset.lastUpdateTime;
        // console.log("截止日期：", this.statisticalTimes);

        // 获取当前系统时间算间隔
        // console.log("国内疫情数据：", dataset.chinaTotal);
        this.chinaTotal = dataset.chinaTotal;
        // console.log("较上日变化的数据", dataset.chinaAdd);
        this.chinaAdd = dataset.chinaAdd;

        const temp = [];
        // console.log("中国所有城市列表的长度：",dataset.areaTree[0].children.length)
        // console.log("某城市所有区域列表的长度",dataset.areaTree[0].children[4].children.length)

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {
          const index = dataset.areaTree[0].children[i];

          for (let j = 0; j < index.children.length; j++) {
            if (index.children[j].name !== "境外输入") {
              // console.log("index.children[j]:",index.children[j].name)
              if (
                index.children[j].total.grade !== undefined &&
                index.children[j].total.nowConfirm !== 0
              ) {
                // console.log("是否有风险等级：",index.children[j].total.grade)
                temp.push(index.children[j]);
                // console.log("temp:",temp)
              }
            }
          }
        }

        this.dangerousPlace = temp.sort(
          (a, b) => b.today.confirm - a.today.confirm
        );
        // console.log("近期31省市区本土病例：", this.dangerousPlace);

        // 新增那一列用插槽，找出所有列表中今天有新增的，用插槽放

        const temp1 = [];

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {
          const index1 = dataset.areaTree[0].children[i];

          temp1.push(index1);
        }

        this.provinceEpidemicData = temp1;

        // console.log("国内疫情表:", this.provinceEpidemicData);
      });
    },
  },
};
</script>


<style scoped>
/deep/canvas {
  height: 100vw;
  width: 30vw;
}

/deep/.ant-table-thead > tr > th {
  padding: 16px 1px;
  overflow-wrap: break-word;
  text-align: center;
  background-color: #ddecff;
  font-size: 2.5vw;
  font-weight: 600;
}
/deep/.ant-table-tbody > tr > td {
  padding: 16px 0px;
  overflow-wrap: break-word;
  text-align: center;
}

/deep/.ant-table-tbody > tr > td.ant-table-column-sort {
  background: inherit;
}

h3 {
  color: #fff;
  margin: 10px auto;
}
h1.slogan {
  color: #fff;
  font-size: 30px;
  position: relative;
  top: 15px;
  font-weight: bold;
}

h2.title1 {
  color: rgb(255, 234, 166);
  font-size: 28px;
  margin-bottom: 0px;
}

h1.title2 {
  font-size: 30px;
  color: #fff;
  margin: 0px;
  padding: 0px;
}

div#header {
  /*max-width:1000px;*/
  /*margin:0 auto;*/
  background: url(../../assets/headerBackground.png);
  background-size: cover;
  position: relative;
  min-height: 210px;
}

div#content {
  /*max-width:1000px;*/
  /*margin:0 auto;*/
  position: relative;
  margin-top: -20px;

  background: #fff;
  border-radius: 2.667vw 2.667vw 0 0;
  box-shadow: #bbbbbb 0px 0px 10px;
}

div.statisticalTimes {
  font-size: 1.4vw;
  padding-top: 10px;
  text-align: left;
}

div#todayChart,
div#totalChart,
div#totalHealAndDeadChart {
  margin: 0px 20px;
  padding: 2vw 1vw 0 1vw;
  border: 1px solid #ddd;
}

div#card-block,
div#dangerousPlaceForm,
div#provinceEpidemicDataForm,
div#knowledge,
div.echartsPart {
  margin: 1.667vw 5.333vw 2vw;
}

p.knowledge-title {
  color: #222;
  font-size: 3.8vw;
  font-weight: 600;
  margin-top: 1em;
}

img.titleLogo {
  width: 4.267vw;
  height: 4.267vw;
}

div.part-title {
  display: flex;
}

span.titleItem {
  font-size: 3vw;
  font-weight: bold;

  margin-left: 1.667vw;
}

li {
  margin-bottom: 1vw;
}

div.part-list {
  margin: 2vw 1vw;
  font-size: 1.8vw;
}

div.knowledge-content {
  margin: 3.333vw 5.333vw 2vw;
  border-radius: 1.6vw;
  background: #f8f8f8;
  padding: 3.333vw 3vw 3vw 3vw;
  text-align: left;
}

div.form-title {
  text-align: left;
  font-size: 2.1vw;
  font-weight: 700;
  color: #222;
}

div#card {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  -ms-flex-pack: center;
  justify-content: center;

  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 1.333vw;
}

div.card-item {
  padding: 5px 10px;
  margin-top: 10px;

  /*width: 21.0vw;*/
  /*width:200px;*/
  margin-right: 10px;
  position: relative;
  text-align: center;
  background-color: #fffaf7;
  padding-bottom: 10px;
}

div.compare {
  padding-top: 1.6vw;
  color: #7c7c7c;
  font-size: 1.967vw;
  line-height: 2.667vw;
  /*height: 2.667vw;*/
  font-weight: 500;
}

div.number {
  font-size: 3.867vw;
  line-height: 5.867vw;
  margin: 5px;
  font-weight: 600;
}

div.card-title {
  font-size: 2vw;
  line-height: 3.2vw;
  color: #222;
  font-weight: 500;
}
</style>
